<template>
  <div class="app-container">
    <vxe-toolbar ref="xToolbar" custom>
      <template #buttons>
        <el-button
          v-if="checkPermission(['sys:admin-permission:add'])"
          type="primary"
          size="medium"
          icon="el-icon-plus"
          @click="edit(0)"
        >新增
        </el-button>
      </template>
    </vxe-toolbar>
    <!--table-->
    <vxe-table
      border
      resizable
      :tree-config="{children: 'children', accordion: true}"
      :data="tableData"
    >
      <vxe-table-column field="title" title="名称" tree-node />
      <vxe-table-column field="permission" title="权限" />
      <vxe-table-column field="sort" title="排序" />
      <vxe-table-column field="updateTime" title="更新时间" />
      <vxe-table-column title="操作" fixed="right" width="300">
        <template #default="{row}">
          <el-button
            v-if="checkPermission(['sys:admin-permission:add']) && row.level < 2"
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="edit(3,row.id)"
          >新增
          </el-button>
          <el-button
            v-if="checkPermission(['sys:admin-permission:update'])"
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="edit(1,row.id)"
          >修改
          </el-button>
          <el-button
            v-if="checkPermission(['sys:admin-permission:delete'])"
            type="danger"
            size="small"
            icon="el-icon-close"
            @click="del(row.id)"
          >删除
          </el-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <!--edit-->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="权限">
          <el-input v-model="form.permission" />
        </el-form-item>
        <el-form-item label="排序">
          <el-slider v-model="form.sort" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          v-if="checkPermission(['sys:admin-permission:add','sys:admin-permission:update'])"
          type="primary"
          @click="edit(2)"
        >确 定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import {
  addAdminPermission,
  delAdminPermission,
  updateAdminPermission,
  getAdminPermission,
  treeAdminPermission
} from '@/api/sys/admin/permission'

export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        id: -1,
        parentId: 0,
        title: '',
        permission: null,
        sort: 0
      },
      num: { a: '', b: 0 }
    }
  },
  created() {
    this.tree()
  },
  methods: {
    add(data) {
      addAdminPermission(data).then(response => {
        this.$message({ type: 'success', message: response.msg })
        this.tree()
      })
    },
    del(id) {
      this.$confirm('是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delAdminPermission(id).then(response => {
          this.$message({ type: 'success', message: response.msg })
          this.tree()
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    update(data) {
      updateAdminPermission(data).then(response => {
        this.$message({ type: 'success', message: response.msg })
        this.tree()
      })
    },
    get(id) {
      getAdminPermission(id).then(response => {
        this.form = response.data
      })
    },
    tree() {
      treeAdminPermission().then(response => {
        if (response.code === 0) {
          this.tableData = response.data
        }
      })
    },
    edit(type, id) {
      // 0 增加 1 修改  2 保存增加 3 增加子节点
      if (type === 0) {
        this.form.id = -1
        this.form.parentId = 0
        this.form.title = null
        this.form.permission = null
        this.form.sort = 0
        this.dialogFormVisible = true
      } else if (type === 1) {
        this.get(id)
        this.dialogFormVisible = true
      } else if (type === 2) {
        if (this.form.id > 0) {
          this.update(this.form)
        } else {
          this.add(this.form)
        }
        this.dialogFormVisible = false
      } else if (type === 3) {
        this.form.id = -1
        this.form.parentId = id
        this.form.title = null
        this.form.permission = null
        this.form.sort = 0
        this.dialogFormVisible = true
      }
    },
    checkPermission // 验证权限
  }
}
</script>
